<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{$info.title}</title>
    <!--共用头部开始-->
    <include file="common:public_head" />
    <!--共用头部结束-->
    <link href="{:RES}/css/Jizhitiaozhan/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="body">
    <img src="{:RES}/images/Jizhitiaozhan/banner.jpg?v=01">
    <p class="zl-time">活动时间：{$info.startTime|date="Y.m.d",###}-{$info.endTime|date="m.d",###}</p>
    <!--内容开始-->
    <div class="main-box" style="padding-top:1.3rem;">
        <form id="form1" method="post" action="{:U($controller.'/projectSubmit2',array('token'=>$token,'wecha_id'=>$wecha_id,'id'=>$_GET['id']))}">
            <input type="hidden" name="id" value="{$_GET['id']}">
            <input type="hidden" name="project_id" value="{$_GET['project_id']}">
            <div class="sign-up-box" style="margin-top:0;">
            <div class="title-box">
                <h1>填写个人信息</h1>
            </div>
            <input type="text" placeholder="姓名" name="name" value="{$project.name}" maxlength="8">
            <input type="text" placeholder="联系方式" name="tel" value="{$project.tel}" maxlength="11">
        </div>
        <div class="sign-up-box">
            <div class="title-box">
                <h1>填写作品信息</h1>
            </div>
            <input type="text" placeholder="作品名称" name="title" value="{$project.title}" maxlength="20">
            <textarea placeholder="作品简介" name="abstract">{$project.abstract}</textarea>
            <p>上传作品照片</p>
            <div class="photo-box">
                <volist name="uploadarr" id="vo">
                <div>
                    <img src="{$vo.img}" class="img_add" id="img{$vo.num}_p" data-id="img{$vo.num}">
                    <img src="{:RES}/images/Jizhitiaozhan/close_btn.png" class="img_del" id="img{$vo.num}_d" data-id="img{$vo.num}" {$vo.isshow}>
                    <input type="hidden" name="img{$vo.num}" id="img{$vo.num}" value="{$vo.imgtrue}"/>
                </div>
                </volist>
            </div>
        </div>
        <a href="javascript:void(0);" class="comfirm" onClick="project_submit();">
            <img src="{:RES}/images/Jizhitiaozhan/queren.png">
        </a>
        </form>
    </div>
    <div class="hold-high"></div>
    <div class="vote-footer">
        <a href="{:U($controller.'/index',array('token'=>$token,'id'=>$_GET['id'],'wecha_id'=>$wecha_id),'')}">
            <img src="{:RES}/images/Jizhitiaozhan/menu01.png">
            <p>主页</p>
        </a>
        <a href="{:U($controller.'/register',array('token'=>$token,'id'=>$_GET['id'],'wecha_id'=>$wecha_id),'')}">
            <img src="{:RES}/images/Jizhitiaozhan/menu02.png">
            <p>我要报名</p>
        </a>
        <a href="{:U($controller.'/ranklist',array('token'=>$token,'id'=>$_GET['id'],'wecha_id'=>$wecha_id),'')}">
            <img src="{:RES}/images/Jizhitiaozhan/menu03.png">
            <p>排行榜</p>
        </a>
        <a href="{:U($controller.'/rules',array('token'=>$token,'id'=>$_GET['id'],'wecha_id'=>$wecha_id),'')}">
            <img src="{:RES}/images/Jizhitiaozhan/menu04.png">
            <p>规则</p>
        </a>
    </div>
</div>
<form style="display:none;" name="qiniu" method="post" action="">
    <input type="file" name="file1" />
</form>
<script type="text/javascript">
    // 提交按钮状态
    var submit_status = true;
    //报修提交
    function project_submit(){
        // 是否禁用按钮
        if (submit_status == false){
            return false;
        }

        if ($("input[name='name']").val() == ''){
            showTip("请输入联系人！");
            $("input[name='name']").focus();
            return;
        }
        if ($("input[name='tel']").val() == ''){
            showTip("请输入联系方式！");
            $("input[name='tel']").focus();
            return;
        }
        var reg={$telReg}i;
        if(!reg.test($("input[name='tel']").val())){
            showTip("请输入11位的手机号！");
            $("input[name='tel']").focus();
            return false;
        }
        if ($("input[name='title']").val() == ''){
            showTip("请输入作品名称！");
            $("input[name='title']").focus();
            return;
        }

        if ($("textarea[name='abstract']").val() == ''){
            showTip("请输入作品简介！");
            $("textarea[name='abstract']").focus();
            return;
        }

        if (($("#img1").val() == '') && ($("#img2").val() == '') && ($("#img3").val() == '') && ($("#img4").val() == '')){
            showTip("请上传照片！");
            return;
        }

        // 禁用按钮
        submit_status = false;
        // 提交按钮背景颜色和字体颜色改变
        $.ajax({
            url: $("#form1").attr('action'), // 表单提交的地址
            type: 'POST',
            dataType: 'json',
            data:$('#form1').serialize(), // 表单提交的数据
            success: function (data) {
                // 成功提示框
                showTip(data.msg);
                if(data.flag == 1){
                    setTimeout(function () {
                        window.location.href="{:U($controller.'/index',array('token'=>$token,'wecha_id'=>$wecha_id,'id'=>$_GET['id']))}";
                    }, 1000);
                } else {
                    // 错误提示框
                    showTip(data.msg);
                    // 按钮恢复可点
                    submit_status = true;
                }
            },
            cache: false
        });
    }

</script>
<!--微信js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
//    var img_count_max = 3;
//    var img_count = 0;
    function is_weixin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var curr_data_id = "";
    $(function(){
                if (is_weixin() == false){
                    return;
                }
                wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: '{$appId}', // 必填，公众号的唯一标识
                        timestamp: {$timestamp|default=0}, // 必填，生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填，生成签名的随机串
            signature: '{$signature}',// 必填，签名，见附录1
            jsApiList: [{$jsApiList}]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        // 图片接口
        // 拍照、本地选图
        $('.img_add').click(function(){
//            if (img_count >= img_count_max){
//                showTip("最多上传"+img_count_max+"张照片！");
//            }
            var data_id = $(this).attr('data-id');
            curr_data_id = data_id;
            $("input[name=file1]").click();
            /*wx.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    $("#"+data_id+"_p").attr('src',res.localIds);
                    $("#"+data_id+"_d").show();
                    uploadImage(data_id, res.localIds);
                }
            });*/
        });

        $("input[name=file1]").change(function (){
            var fileName = $(this).val();
            var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length); //后缀名
            var file = $(this).get(0).files[0];
            $.ajax({ type: 'post', data: {"suffix": suffix}, dataType: 'json',
                url: '{:U($controller."/qiniu_token",array("token"=>$token,"wecha_id"=>$wecha_id,"id"=>$_GET["id"]),"")}',
                success: function (res){
                    var token = res.info;
                    var observer = {                         //设置上传过程的监听函数
                        next(result){ Math.floor(result.total.percent);},
                        error(err){ alert(err.message); },
                        complete(res1){
                            var domain = "http://staticimg.weikedashi.net/";
                            var url = domain + res1.key;
                            console.log(url)
                            console.log(curr_data_id)
                            $("#"+curr_data_id).val(url);
                            $("#"+curr_data_id+"_p").attr('src',url);
                            $("#"+curr_data_id+"_d").show();
                        }
                    };
                    var putExtra = {fname: "", params: {},mimeType: null};
                    var config = {
                        region: qiniu.region.z2,             //存储区域(z0: 代表华东;不写默认自动识别)
                        concurrentRequestLimit:3            //分片上传的并发请求量
                    };
                    var key = generate_key() + suffix;
                    var observable = qiniu.upload(file, key, token, putExtra, config);
                    observable.subscribe(observer);          // 上传开始
                    //上传表单中选择的文件
                    //const observable = qiniu.upload(file, null, token, putExtra, config)
                }
            });
        });

        $('.img_del').click(function(){
            var data_id = $(this).attr('data-id');
            $("#"+data_id+"_p").attr('src','{:RES}/images/Jizhitiaozhan/photo-btn.png');
            $("#"+data_id).val("");
            $(this).hide();
        });
        // 图片预览
        // document.querySelector('#file_upload_img').onclick = function (){
        //     wx.previewImage({
        //       current: $('#file_upload_img').attr('src'),
        //       urls: [
        //         $('#file_upload_img').attr('src')
        //       ]
        //     });
        // }
    });

    function generate_key(){
        var timestamp=new Date().getTime();
        var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var arr = str.split("");
        var result = "";
        for(var i=0;i<8;i++){
            var n = Math.floor(Math.random() * arr.length);
            result += arr[n];
        }
        return result + timestamp;
    }

    function uploadImage_abort(id,localIds) {
        //上传图片改用七牛云
        return false;
            wx.uploadImage({
            localId: localIds[0],
            isShowProgressTips: 1,// 默认为1，显示进度提示
            success: function (res) {
                $.ajax({
                    url:'{:U($controller."/uploadImage",array("token"=>$token,"wecha_id"=>$wecha_id,"id"=>$_GET["id"]),"")}',
                    type:'post',
                    dataType:'json',
                    data:'media_id='+res.serverId,
                    success:function(data){
                        data = eval(data);
                        $("#"+id).val(data.url);
                    }
                })
            },
            fail: function (res) {

            }
        });
    }
    wx.error(function(res){
        //alert(JSON.stringify(res));
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
    });
</script>
</body>

</html>
